<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实名认证</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        	padding-top:45px;
	        	
	        }
	        .clearfix:before{
            display:table;
            content:'';
	        } 
	        .clearfix:after{ 
	            display:table;
	            content:'';
	            clear:both;
	        }
			/*title的样式覆盖*/
			.mui-bar{
				background-color:#2a2c33;
				top:0;
			}
			.mui-bar>a{
				color:#fff;
			}
			.mui-title{
				color:#fff;
			}
			.mui-input-row:last-child:after{
				display:none;
			}
			.mui-input-group:before{
				display:none;
			}
			.mui-input-group:after{
				display:none;
			}
			#input1::-webkit-input-placeholder{
				line-height: 22px;
			}
			/*百分比优化*/
			.mui-input-clear{
				padding: 11px 4%;
			}
			.mui-input-row label {
				
				width: auto;
				padding-left:4%;
				padding-right:4%;
				text-align: center,
			}
			.mui-input-row label~input{
				/*width:calc(100% - 8% - 68px);*/
			}
			
			.main1{
				margin-top:10px;
				background-color:#fff;
				padding-bottom:10px;
			}
			.main1>.top{
				padding:0 4%;
				line-height: 40px;
				font-size: 17px;
				border-bottom: 1px solid #e5e5e5;
				overflow: hidden;
			}
			.main1>.top span{
				float: right;
				text-decoration: underline;
				color: #43AC45;
				vertical-align: -1px;
			}
			.main5>div{
				margin:0 auto;
				margin-top:10px;
				width:74.66%;
				height:80px;
				background:#e5e5e5 url() no-repeat center center;
				background-size:93px 75px;
			}
			.main5>div:nth-child(1){
				background-image: url(../../images/my/index/card-1.png);
			}
			.main5>div:nth-child(2){
				background-image: url(../../images/my/index/card-2.png);
			}
			.main5>div:nth-child(3){
				background-image: url(../../images/my/index/card-3.png);
			}
			.true{
				font-size:13px;
				line-height: 13px;
				color:#43AC45;
				width:108px;
				margin:0 auto;
				margin-top:20px;
				padding-left:17px;
				background:url('../../images/my/index/check-1.png') no-repeat center left;
				background-size:13px 13px;
				text-decoration:underline;
			}
			.true1{
				background-image:url('../../images/my/index/check-2.png');
			}
			.mui-btn{
				display:block;
				width:94%;
				padding-left: 3%;
				padding-right: 3%;
				margin:0 auto;
				height:40px;
				background-color: #58b8f4;
				border-color:#58b8f4;
				font-size: 15px;
				margin-top:20px;
				
			}
			
			/*.mui-input-group .mui-input-row:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 15px;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}*/
			.notice{
				font-size: 13px;
				text-align: center;
				line-height: 1.4;
				color: #999;
				margin: 5px 0;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar ">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" id="back1"></a>
			<h1 class="mui-title">实名认证</h1>
		</header>
		
		<form class="mui-input-group" style='margin-top:10px;'>
		    <div class="mui-input-row" >
		    	 <label>真实姓名</label>
		        <input type="text" class="mui-input-clear" placeholder="请填写" style='line-height: 20px;' id='input1' maxlength="6">
		    </div>
		    <div class="mui-input-row">
		    	 <label>身份证号</label>
		        <input type="text" class="mui-input-clear" placeholder="请填写" style='line-height: 20px;' id='input2' maxlength="18">
		    </div>
		</form>
		<div class='main1'>
			<div class="top">上传身份证照片</div>
			<div class='main5'>
				<div id="first1" data-num='1'></div>
				<div id='second1' data-num='2'></div>
				<div id="third" data-num='3'></div>
			</div>
			<div class='true' id="agree">我同意相关协议</div>
			<div class="notice">注意：实名认证需要3个工作日完成审核</div>
			<button type="button" class="mui-btn mui-btn-success" id='submit1'>确认并上传</button>
		</div>
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell" id='submit2'>
		        <a href="#">从相册中选择</a>
		      </li>
		      <li class="mui-table-view-cell" id='submit3'>
		        <a href="#">拍照</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a href="#sheet1"><b>取消</b></a>
		      </li>
		    </ul>
		   	
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script type="text/javascript" src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../js/life_housekeeper/snapshot.js"></script>
		<script type="text/javascript">

			mui.plusReady(function(){
				init();
				function init() {
					//实名认证 每次都需要实时获取 除了已经认证成功
					if(plus.storage.getItem('cg_certification')!=1){
						myAjax('personal/user_profile/getselfprofile', 'get', {
							'user_id': plus.storage.getItem('cg_user_id'),
							'user_token': plus.storage.getItem('cg_user_token')
						}, function(data) {
							if(!data.success){
								plus.nativeUI.alert(data.error_msg, function() {
								}, "错误", "确定");
								return ;//发生错误 就直接退出
							}
							plus.storage.setItem('cg_certification', data.certification);
							if(plus.storage.getItem('cg_certification')==-1){
								$('#userTrueName').html('未认证');
							}else if(plus.storage.getItem('cg_certification')==0){
								$('#userTrueName').html('审核中');
							}else if(plus.storage.getItem('cg_certification')==1){
								$('#userTrueName').html('认证成功');
							}else if(plus.storage.getItem('cg_certification')==2){
								$('#userTrueName').html('认证失败');
							}
						});}
				}

				//优化比例图片
				for(var i=0;i<$('.main5>div').length;i++){
					$('.main5>div:eq('+i+')').height($('.main5>div:eq('+i+')').width()*0.67);
				}

				//输入框calc兼容
				$('.mui-input-clear').css({'width':document.body.clientWidth*0.92-68+'px'});
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show('slide-in-right',200);
				
				//选择图片后,返回按钮bug
				back1.addEventListener("tap",function () {plus.webview.currentWebview().close();});
				//绑定上传头像事件
				submit2.addEventListener("tap",function () {chooseImgFromAlbums();});
				submit3.addEventListener("tap",function () {chooseImgFromPictures();});
				
				//上传函数
				submit1.addEventListener("tap",function () {sub();});
				//相关协议
				$('#agree').click(function(){
					mui.openWindow({
						url: 'user-5.html',
						id: 'user-5.html',
						show: {
							autoShow: false, //页面loaded事件发生后自动显示，默认为true
							duration: 200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							title: '正在加载...' //等待对话框上显示的提示内容
						}
					})
				});
				
				var nowObj,list;//当前是哪块上传
				list=[];
				//绑定上传头像事件
				
				$('.main5>div').click(function(){
					
					var $index = $(this).index();
					nowObj = $index + 1 ;
					checkUploadWay(1,uploadHead);
				})
//				$('.main5>div#first1').click(function(){
//					nowObj=1;
//					checkUploadWay(1,uploadHead);
//					//chooseImgFromAlbums();
//				});
//				$('.main5>div#second1').click(function(){
//					nowObj=2;
//					checkUploadWay(1,uploadHead);
//					//chooseImgFromAlbums();	
//				});
//				$('.main5>div#third').click(function(){
//					nowObj=3;
//					checkUploadWay(1,uploadHead);
//					//chooseImgFromAlbums();
//				});
				
				//从相册选择
				function chooseImgFromAlbums(){
//					mui('#sheet1').popover('hide');
					plus.gallery.pick(function(file) {
						changeToLocalUrl(file);
					},
					function(err) {
						console.log(JSON.stringify(err));
						
					}, 
					{
					filter: 'image',
					multiple: false
					});
				}
				
				//拍照选择头像
				function chooseImgFromPictures() {
					mui('#sheet1').popover('hide');
					var cmr = plus.camera.getCamera();
					cmr.captureImage(function(file) {
					changeToLocalUrl(file);
					}, function(err) {
						
						console.log(JSON.stringify(err));
					}, {
					index: '2'
					});
				}
				
				//接受到头像 进行处理跳转
				function changeToLocalUrl(path) {
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						entry.file( function ( file ) {
							if(file.size/1024/1024<5){
								var multiple=1-(file.size/1024/1024/5).toFixed(1);
								uploadHead(entry.toLocalURL(),multiple);
								plus.nativeUI.showWaiting();
							}else{
								mui.toast('图片大于5M,请重新上传');
							}
						}, function ( e ) {
							alert( e.message );
						} );
	
						
					});
				}
				//把新头像更新到页面
				 function uploadHead(imgPath,b) { 
				 	   
	//		            mainImage.src = imgPath; 
			            var image = new Image(); 
			            image.src = imgPath; 
			            image.onload = function() { 
			               plus.nativeUI.closeWaiting();
			               if(b){
			            	var imgData = getBase64Image(image,b); 
			               }else{
			               	var imgData = imgPath;
			               }
			               if(nowObj==1){
			               		$('#first1').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
			               		list[0]=imgData;
			               }else if(nowObj==2){
			               		$('#second1').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
			               		list[1]=imgData;
			               }else{
			               		$('#third').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
			               		list[2]=imgData;
			               }
			            } 
			    } 
	        	//将图片压缩转成base64 
		        function getBase64Image(img,b) { 
		            var canvas = document.createElement("canvas"); 
		            var width = img.width; 
		            var height = img.height; 
		            // calculate the width and height, constraining the proportions 
		            //图片比例一定的取中间
		            var x,y,c,z;
		            if (width > height) { 
						x=(width-height)/2;
						y=0;
						c=height;
						z=height;
		            } else if(width < height){ 
						x=0;
						y=(height-width)/2;
						c=width;
						z=width;
		            }else{
		            	x=0;
						y=0;
						c=width;
						z=height;
		            }
					var clipArea = document.getElementById("clipArea");
		            canvas.width = width;   /*设置新的图片的宽度*/ 
		            canvas.height = height; /*设置新的图片的长度*/ 
		            var ctx = canvas.getContext("2d"); 
		            ctx.drawImage(img,0,0,width,height); /*绘图*/ 
		            var dataURL = canvas.toDataURL("image/jpeg",.5); 
		           	return dataURL;
		        }
		    	
		    	//确认上传函数
		    	function sub(){
		    		var a=new RegExp(/\d{17}[\d|x]|\d{15}/);
		    		var a1=new RegExp(/^[\u4e00-\u9fa5]+$/);
		    		if(input1.value.trim()==''){
		    			mui.toast('真实姓名不能为空');
		    		}else if(!a1.test(input1.value)){
		    			mui.toast('真实姓名格式错误');
		    		}else if(input2.value.trim()==''){
						mui.toast('身份证号不能为空');
					}else if(!a.test(input2.value)){
						mui.toast('身份证号格式错误');
					}else if(!list[0]){
						mui.toast('请上传身份证照（正面）');
					}else if(!list[1]){
						mui.toast('请上传身份证照（反面）');
					}else if(!list[2]){
						mui.toast('请上传手持身份证照');
					}else{
						plus.nativeUI.showWaiting('上传中...');
						var img = [];
						for(var i = 0, length = list.length; i < length; i += 1){
							var datastr = list[i].split(',',3);
							if(datastr.length>1)
							{
							img.push(datastr[1]);
							}else
							{
							img.push(datastr[0]);
							}
						}
						//console.log(img.length);
						
						 myAjax('personal/user/setCertification', 'post', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'true_name':input1.value.trim(),
								'creadit_card':input2.value.trim(),
								'front_pic':img[0],
								'back_pic':img[1],
								'main_pic':img[2]
							}, function(data) {
								
								plus.nativeUI.closeWaiting();
								if(data.success){
									 //修改实名认证
									plus.storage.setItem('cg_certification','0');
//									console.log('上传ok后认证状态'+plus.storage.getItem('cg_certification'));
//									plus.storage.setItem('cg_signature', textarea.value.trim());
									var main = plus.webview.getWebviewById('user.html'),//或者通过A页面id获取A页面对象
										registration = plus.webview.getWebviewById('registration.html');
									mui.fire(main, "pageflowrefresh" ,{'userTrueName':true});//出发A页面的pageflowrefresh方法
									mui.fire(registration,"refresh");
									mui.toast('实名认证上传成功');
									plus.webview.currentWebview().close();
								}else{
									mui.toast(data.error_msg);
								}
						})
					}
		    	}
		    
			});
		</script>
	</body>
</html>


